<template>
	<!-- 滑动验证 -->
	<view class="sliders">
		<text>{{ def }}</text>
		<view class="operationBgBox" :style="{ left: - xRange + 'px;transform:' + animation }">
			<text>{{ succeedMsg }}</text>
			<view class="operationBox" @touchmove="touchmove" @touchend="touchend">
				<text class="iconfont icon-youjiantou"></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'cg-sliders',
	props: {},
	data() {
		return {
			def: '右滑验证', //默认提示语
			systemWidth: '', //获取屏幕宽度
			xAxial: 0, //X轴的初始值
			x: 0, //触摸时X轴的值
			xRange: '', //滑块可移动的X轴范围
			animation: 'translate3d(0, 0, 0)', //CSS动画的初始值
			succeedMsg: '', //验证成功提示信息的默认值
			pullStatus: true //是否允许验证成功后继续滑动
		};
	},
	created() {
		this.systemWidth = uni.getSystemInfoSync().windowWidth;
		this.xRange = uni.getSystemInfoSync().windowWidth*0.8;
	},
	methods: {
		
		touchmove(e) {
			//如验证成功后仍允许滑动，则执行下面代码块（初始值默认为允许）
			if (this.pullStatus) {
				//设置X轴的始点
				this.x = e.changedTouches[0].clientX - (this.systemWidth * 0.1 + 25);
				//如果触摸时X轴的坐标大于可移动距离则设置元素X轴的坐标等于可移动距离的最大值，否则元素X轴的坐标等于等于当前触摸X轴的坐标
				this.x >= this.xRange ? (this.xAxial = this.xRange) : (this.xAxial = this.x);
				//如果触摸时X轴的坐标小于设定的始点，则将元素X轴的坐标设置为0
				if (this.x < 25) this.xAxial = 0;
				//根据获取到的X轴坐标进行动画演示
				this.animation = 'translate3d(' + this.xAxial + 'px, 0, 0)';
			}
		},
		
		touchend() {
			var data = {};
			//如果触摸的X轴坐标大于等于设置的可移动范围，则验证成功
			if (this.x >= this.xRange) {
				//X轴坐标等于可移动范围的最大值
				this.xAxial = this.xRange;
				//验证成功提示语
				this.succeedMsg = '验证成功';
				//设置返回值
				data.flag = true;
				//验证成功禁止滑动
				this.pullStatus = false;
			} else {
				//X轴坐标归0
				this.xAxial = 0;
				//清空成功提示
				this.succeedMsg = '';
				//设置返回值
				data.flag = false;
			}
			//根据获取的X轴坐标进行动画演示
			this.animation = 'translate3d(' + this.xAxial + 'px, 0, 0)';
			// 返回验证结果
			this.$emit('event',data)
		},
	}
};
</script>

<style>
.sliders {
	width: 100%;
	height: 84rpx;
	border: 1px solid #0081ff;
	background-color: #FFFFFF;
	color: #0081ff;
	border-radius: 10rpx;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.operationBgBox {
	height: 84rpx;
	width: 100%;
	background-color: #EBF6FF;
	border-radius: 10rpx;
	overflow: hidden;
	position: absolute;
	top: 0;
	color: #0081ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.operationBox {
	height: 84rpx;
	width: 100rpx;
	background-color: #0081ff;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 0;
}

.operationBox image {
	width: 50%;
	height: 50%;
}
</style>
